import './styles/Mapwindow.less';

class InfoWindow extends AMap.Marker {
  _sevents = []
  _hevents = []

  constructor({showClose = true,isShow = true,isOnly = false,...options}) {
    super({...options,visible:false});
    this._showClose = showClose;
    this._init();
    if(isOnly){
      options.map.addInfoWindow(this);
    }
    // if(!isShow)this.hide();
    if(isShow)this.show();
  }

  _init(){
    let $this = this;
    this._root = document.createElement('div');
    let showCloseStyle = !this._showClose ? 'style="display:none;"' : '';
    let template = `
      <div class="map-infowindow">
        <div class="iw-close" ${showCloseStyle}><i class="ivu-icon ivu-icon-close-circled"></i></div>
        <div class="iw-arrow"></div>
        <div class="iw-content"></div>
      </div>
    `;
    this._root.innerHTML = template;
    this._root.querySelector('.iw-close').addEventListener('click', function() {
      $this.hide();
    });

    super.setContent(this._root);
  }

  setHtml(content) {
    let box = this._root.querySelector('.iw-content');
    if (typeof(content) === 'string') {
      box.innerHTML = content;
    }
    if (typeof(content) === 'object') {
      box.appendChild(content);
    }
  }

  getHtml() {
    return this._root.querySelector('.iw-content').innerHTML;
  }

  onHide(fn){
    this._hevents.push(fn);
  }

  onShow(fn){
    this._sevents.push(fn);
  }

  hide(){
    this._hevents.forEach(v=>{
      v();
    });
    super.hide();
  }

  show(){
    this._sevents.forEach(v=>{
      v();
    });
    super.show();
  }

}

export default InfoWindow;
